* {
  box-sizing: border-box;
}
body {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.content {
  width: 1200px;
  height: 300px;
  position: relative;
  background-color: #393939;
}
.content .info {
  width: 100%;
  color: #fff;
  display: flex;
}
.content .info .info-left {
  flex-grow: 1;
  margin-left: 20px;
  margin-top: 80px;
}
.content .info .info-right {
  flex-grow: 1;
  margin-left: 20px;
  margin-top: 80px;
}
.content > input {
  display: none;
}
.content .register {
  color: #fff;
  display: inline-block;
  border: 3px solid #656565;
  width: 100px;
  height: 30px;
  margin-left: 20px;
  text-align: center;
  transition: all 1s;
}
.content .login {
  color: #fff;
  display: inline-block;
  border: 3px solid #656565;
  width: 100px;
  height: 30px;
  margin-left: 495px;
  text-align: center;
  transition: all 1s;
}
.content #register:checked + .register {
  border: 3px solid #cccccc;
  background-color: #cccccc;
  color: gray;
}
.content #login:checked + .login {
  border: 3px solid #cccccc;
  background-color: #cccccc;
  color: gray;
}
.content #register:checked ~ .showbox {
  transform: translateX(3px);
}
.content #login:checked ~ .showbox {
  transform: translateX(602px);
}
.content #register:checked ~ .showbox .register-form {
  transform: translateX(0px);
}
.content #login:checked ~ .showbox .login-form {
  transform: translateX(0px);
}
.content .showbox {
  position: absolute;
  top: -100px;
  left: 52px;
  width: 500px;
  height: 500px;
  background-color: #fff;
  box-shadow: 0px 0px 20px 1px #b9b9b9;
  transition: all 1s;
  transform: translateX(100px);
  overflow: hidden;
}
.content .showbox form {
  position: absolute;
  margin: 50px 30px;
  width: 440px;
  height: 400px;
  transition: all 1s;
}
.content .showbox form h1 {
  margin-top: 92px;
  color: red;
}
.content .showbox form > p {
  display: flex;
  align-items: center;
  color: #bababa;
  font-size: 25px;
}
.content .showbox form > p > input {
  margin-left: 10px;
  width: 80%;
  height: 30px;
  border: 2px solid #bababa;
}
.content .showbox form .btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.content .showbox form .btn p {
  font-size: 16px;
  color: #bababa;
}
.content .showbox form .btn > input {
  width: 100px;
  height: 40px;
  font-size: 20px;
  color: #fff;
  background-color: #ec6f6d;
  border: 2px solid #ecaba5;
  margin-right: 20px;
}
.content .showbox .register-form {
  transform: translateX(480px);
}
.content .showbox .login-form {
  transform: translateX(-500px);
}
